import React, { Component, Fragment } from 'react';
import { connect } from 'react-redux'
import './css/themeColor.less';
const less = window.less
class themeColors extends Component {
    constructor(props) {
        super(props);
        this.state = {
            color: "#333333"
        }
    }

    updateColor = (color = "#333333") => {
        console.log(color);
        less.modifyVars({
            '@borderColor': color
        });
    }


    render() {
        return (
            <Fragment>
                <div className="container"></div>

                <button onClick={() => this.updateColor('#ff0000')}>#ff000</button>
                <button onClick={() => this.updateColor('#00ff00')}>#00ff00</button>
                <button onClick={() => this.updateColor('#0000ff')}>#0000ff</button>
            </Fragment>
        )
    }

}

export default connect()(themeColors);